<template>
  <div id="mainportal" class="container" style="overflow: hidden;background-color: #fff;">

  <comhead title="忘记密码" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   
  <div style='padding:10px 0;text-align:center'>

  </div>

  <div class='session1'>
    <div >
      账号:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;'>
      <input maxlength="11" type='number' placeholder="输入手机号" v-model="loginName" />
    </div>
  </div>

  <div class='session1'>
    <div >
      验证:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;display:flex;align-items: center;position: relative;'>
      <input   placeholder="输入短信验证码" maxlength='6' v-model="code" />
       <div @click="getCode()" class='getCode' :style="'color:'+$store.getters.getMerchant.themeColors">
        <div style='height:20px;border-right: solid 1px #e5e5e5;'>
        </div>
        <div style='padding:10px;'>{{verifyInfo}}</div>
      </div>
  </div>
    </div>
    <!-- <button bindtap="vaild" style='font-size:24rpx;width:6rem;' size="mini" plain="true" type="info" disabled="{{isdisable}}">
      <div style="margin:5px;">{{verifyInfo}}</div>
    </button> -->

  <div class='session1'>
    <div >
      密码:
    </div>
    <div style='flex:1;padding:10px 0 10px 10px;border-bottom: solid 1px #e5e5e5;'>
      <input  type='password' placeholder="输入新的密码"  v-model="password"/>
    </div>
  </div>

 

  <div style="    display: flex;">
    <button class='sign' :style="loginName.length>0&&password.length>0&&code.length>0?'background-color:'+$store.getters.getMerchant.themeColors :'background-color:#ccc'" style="border:1px;margin: 25px;    width: 100%; border-radius: 5px;  font-size: 15px;color:#fff;" @click='sign'>
      提交
    </button>
  </div>





  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../common/coffee/Comhead";

export default {
  data() {
    return {
      loginName: "",
      password: "",
      verifyInfo: "获取验证码",
      isdisable: false,
      contactMobile: "",
      index: 0,
      code: "" //验证码
    };
  },
  computed: {},

  methods: {
    sign() {
      if (
        !this.loginName.length > 0 ||
        !this.password.length > 0 ||
        !this.code.length > 0
      ) {
        return;
      }

      if (this.loginName.length!==11) {
        MessageBox.alert("手机号格式错误");
        return;
      } else {
        let self = this;
       let url = this.$baseUrl.bizUrl + "/user/password/find";
            let data = {
              mobile: this.loginName,
              password: this.password,
              code: this.code,
          merchantId: this.$store.getters.getMerchant.merchantId
            };
            let callBack = res => {
              if (res == null) {
                console.log("网络请求错误！");
                return;
              }

              if (res.data.status != 200) {
                console.log("出错了", res);
                return;
              }
              if (res.data.status === 200) {
                Toast("成功");
                this.$router.replace("/login");
              }
            };
            this.$reqFormPost(url, data, callBack);
      }
    },
    getCode() {
      if (this.isdisable == true) {
        return;
      }

      if (this.loginName.length!==11) {
        MessageBox.alert("手机号格式错误");
        return;
      }

      let self = this;
      let url = this.$baseUrl.bizUrl + "/auth/getsmscode";

      let data = {
        mobile: this.loginName,
        type: "SMS_118110004"
      };
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误1！");
          return;
        }
        if (res.data.status != 200) {
          MessageBox.alert(res.data.message);
          return;
        }

        if (res.data.status == 200) {
          var count = 60;
          var timer = setInterval(function() {
            count--;
            if (count >= 1) {
              self.verifyInfo = count + "s";
            } else {
              self.verifyInfo = "获取验证码";
              clearInterval(timer);
              self.isdisable = false;
            }
          }, 1000);
          self.isdisable = true;
          let instance = Toast({
            message: "发送成功",
            iconClass: "icon icon-success"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    }
  },
  mounted() {},
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.session1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: #fff;
  padding: 10px 25px;
}

.signBox {
  padding: 5px 0;
}

.itemsBix {
  display: flex;
  align-items: center;
}

.item-sign {
  display: flex;
  justify-content: center;
  padding: 5px 25px;
  font-size: 14px;
}

.getCode {
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  /* padding: 10rpx 0; */
}

sign {
}

sign:active {
  opacity: 0.5;
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
